<template>
    <div class="myList">
        <ul>
            <li v-for="item in listData" :key="item.product_id">
                <router-link to="">
                    <img :src="$target + item.product_picture" :alt="item.product_name">
                    <h2>{{item.product_name}}</h2>
                    <h3>{{item.product_title}}</h3>
                    <p>
                        <span>{{item.product_selling_price}}元</span>
                        <span v-if="item.product_selling_price != item.product_price"
                              class="del">
                                                    {{item.product_price}}元</span>
                    </p>
                </router-link>
            </li>
            <li id="more">
                <router-link to="">
                    浏览更多
                    <i class="el-icon-d-arrow-right"></i>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "MyList",
        props: [
            "listData"
        ],
        data() {
            return {};
        },

        watch: {},

        created() {

        },

        mounted() {

        },

        methods: {},

        computed: {}
    };
</script>

<style lang="scss" type="text/scss" scoped>
    .myList{
        li{
            position: relative;
            float: left;
            padding: 10px 0;
            margin: 0 0 14.5px 13.7px;
            width: 234px;
            height: 280px;
            background-color: #fff;
            transition: all .2s linear;
            z-index: 1;

            &#more{
                text-align: center;
                line-height: 280px;
                font-size: 18px;
                color: #333;
            }

            img{
                display: block;
                width: 160px;
                height: 160px;
                background: url("../assets/imgs/placeholder.png") no-repeat 50%;
                margin: 0 auto;
            }
            h2{
                margin: 25px 10px 0;
                font-size: 14px;
                color: #333;
                font-weight: 400;
                text-align: center;

                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            h3{
                margin: 5px 10px;
                height: 18px;
                font-size: 12px;
                font-weight: 400;
                color: #b0b0b0;
                text-align: center;

                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            p{
                margin: 10px 10px 10px;
                text-align: center;
                color: #ff6700;
                .del{
                    margin-left: .5em;
                    color: #b0b0b0;
                    text-decoration: line-through;
                }
            }
        }
    }
</style>